<template>
    <div id="personal" v-title="title">
        <!--个人中心头部(已登录)-->
        <div class="header-per" v-if="loginFlag==true">
            <router-link :to="{name:'setting',params:{id : this.user.id}}">
            <div class="header-left head-image">
                <img v-if="user.headImg" :src="this.$store.state.picHead + user.headImg"/>
                </div>
            <div class="header-right">
                <div class="header-right-left">
                    <div class="header-name">{{user.nickName}}
                        <span v-if="grade">VIP</span>
                    </div>
                    <div class="header-text">{{user.text}}</div>
                </div>
                <div class="header-right-right">
                    <i class="icon-jiantou iconfont"></i>
                </div>
            </div>
            </router-link>
        </div>
        <!--个人中心头部(未登录)-->
        <div class="header-per" v-if="loginFlag==false">
            <router-link :to="{name:'login'}">
                <div class="header-left head-image">
                </div>
                <div class="header-right">
                        <div class="no-user" @click="go('login',$event,1)">立即登录</div>
                </div>
            </router-link>
        </div>
        <!--个人中心（设置项）-->
        <div class="mycenter-list">
            <router-link class="mycenter-item iconfont icon-jiantou" v-for="item,index in mylist" :to="{'name': loginFlag ? item.pathName : 'login'}"  :key="index" replace>
                <div class="buy" @click="go(item,$event)">
                    <!--<div class="buy-text iconfont" :class="item.className">{{item.title}}</div>-->
                    <div class="buy-text iconfont">
                        <svg class="icon" aria-hidden="true">
                        　　<use :xlink:href="item.className"></use>
                    　　</svg>
                        <span>{{item.title}}</span>
                    </div>
                    <div class="btn-mun"><span v-if="loginFlag && item.num">{{item.num}}</span></div>
                </div>
            </router-link>
        </div>
        <!--底部-->
        <z-footer></z-footer>
    </div>
</template>

<script>
import {appService} from '../../service/appService'
import {userService} from '../../service/userService'
import {commonService} from '../../service/commonService'
    export default {
        metaInfo () {
            // console.log(this);
            const title = '个人中心'
            return {
                title,
                meta: [
                    { vmid: 'description', name: 'description', content: '运联' },
                    { vmid: 'keyWords', name: 'keyWords', content: '运联首页' },
                ]
            }
        },
        data () {
            return {
//                判断是否登录
                loginFlag:null,
                title:'个人中心',
//                钻石等级
                grade:'',
                user:{
                    id:'',
                    name:'',
                    text:'',
                    img:'',
                    buymun:'0',
                    activityNum:'0',
                    shopNum:'0',
                    collectNum:'0',
                    messageNum:'0',
                    shopid:'',
                    headImg:''
                },
                mylist:[
                    {className:'#icon-wodeyigou',pathName:'myOrders',title:'我的购买',num:0},
                    {className:'#icon-shoucang2',pathName:'mycollect',title:'我的收藏',num:0},
                    // {className:'#icon-wodejifen',pathName:'',title:'我的积分',num:0},
                    // {className:'#icon-duihuanma',pathName:'',title:'兑换码',num:0},
                    {className:'#icon-huiyuanzhongxin',pathName:'vip',title:'会员中心',num:0},
                    {className:'#icon-tongzhi',pathName:'mynews',title:'消息通知',num:0},
                    {className:'#icon-shezhi1',pathName:'setting',title:'设置',num:0},
                    {className:'#icon-renzheng',pathName:'sponsor',title:'申请作者/主办方',num:0},
                    ]
            }
        },
        mounted: function() {
            let that = this;
            /*setTimeout(function () {
                    document.title='个人中心'
            },1)*/
//            修改真实shopId
            window.localStorage.setItem('pathId',that.$store.state.shopId)
            if(localStorage.token && localStorage.token!='undefined'){
                this.loginFlag = true;
                let vip;
                userService.myCenter().then(function(res){
//                    console.log(res);
                    if(res.data.success){
                        let user = res.data.datas.user;
                        let baseUser = res.data.datas.baseUser;
//                        console.log(res.data.datas);
                        that.user.nickName = user.nickName
                        that.user.id = user.id;
                        that.user.text = user.descripthion;
                        that.user.headImg = user.headImg;
                        if(user.numItem){
//                            that.mylist[0].num = user.numItem.buyNum
//                            that.mylist[1].num = user.numItem.collectNum;
//                            that.mylist[5].num = user.numItem.unreadMsgNum;
                            that.mylist[3].num = user.numItem.unreadMsgNum;
                            let item = that.mylist[0]
                            that.mylist.splice(0,1,item)
                        }
//                        判断是否VIP
                        let userId = user.id
                        userService.isVip({userId:userId}).then(function(res){
                            if(res.data.success){
                                that.grade = res.data.datas
                            }
                        })
//                        that.grade = user.myVip.vip || user.myVip
//                        if(user.myVip && user.myVip.vip){
//                            vip = user.myVip.vipId;
//                            userService.isVip(vip).then(function(res){
//                                if(res.data.datas != null){
//                                    that.grade = res.data.datas.level
//                                }
//                            })
//                        }else{
//                            that.grade = ''
//                        }
                    }else{
                     //账户信息过期，需要重新登录
//                        window.localStorage.removeItem('token');
//                        that.$router.replace({path:'login/phone'})
                        that.loginFlag = false;
                    }
                });
            }else{
                this.loginFlag = false;
            }
        },
        methods: {
//            增加登录前记录地址
            go(item,e,flag){
                let that = this
                if(appService.checkLogin()){
                    that.$router.replace({name:item.pathName})
                }else{
//                    if(!flag) commonService.autoCloseModal(that,'请登录后使用',1)
//                    e.stopPropagation()
//                    setTimeout(function(){
//                        localStorage.redirectUrl = location.href
//                        that.$router.push({name:'login'})
//                    },500)
                }
            }
        },

    }
</script>

<style lang="less">
    @import url('../../assets/css/size.less');

    body{
        background:#F9F9F9;
    }
    a{text-decoration: none;}
    #personal{
        background: #F9F9F9;
        .header-per{
            width:100%;
            height:@size120;
            background:#fff;
            padding:0.8rem 0;
            box-sizing:border-box;
            .header-left{
                width:@size72;
                height:@size72;
                float:left;
                border-radius: 50%;
                margin-left:0.6rem;
                img{
                    width:100%;
                    height:100%;
                    border-radius: 50%;
                }
                .icon-wodetianchong {
                    font-size: 1.5rem;
                    color: #fff;
                    line-height: 2rem;
                }
            }
            .header-right{
                width:@size256;
                height:@size72;
                float:right;
                .header-right-left{
                    width:@size211;
                    height:@size72;
                    float:left;
                    .header-name{
                        /*height:0.77rem;*/
                        /*line-height:0.77rem;*/
                        font-size: 20px;
                        color: #333333;
                        text-align: left;
                        margin-top: 0.2rem;
                        img{
                            width:0.45rem;
                            height:0.37rem;
                            margin-left:0.1rem;
                            margin-top: .2rem;
                        }
                        span{
                            color:#E1B272;
                            background: #333333;
                            font-size: 12px;
                            padding:0 0.1rem;
                            box-sizing: border-box;
                        }
                    }
                    .header-text{
                        height:0.7rem;
                        line-height:0.7rem;
                        opacity: 0.8;
                        font-size: 15px;
                        color: #333333;
                        text-align: left;
                        white-space:nowrap;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        margin-top:0.13rem;
                    }
                }
                .header-right-right{
                    width:0.6rem;
                    height:1.47rem;
                    line-height:@size72;
                    float:right;
                    font-size:18px;
                    color:#DDDDDD;
                }
                .no-user{
                    width:@size256;
                    height:1.47rem;
                    line-height:@size72;
                    font-size: 15px;
                    color: #333333;
                    text-align: left;
                }
            }
        }
        .mycenter-item:before{
            float: right;
            line-height: @size55;
            padding-right: 5px;
            color:#ddd;
        }
        .mycenter-list {
            margin-top:  10px;
            background:  #fff;
            .mycenter-item{
                width:100%;
                box-sizing: border-box;
                margin-top:0.27rem;
                background:#fff;
                a:last-child{
                    div{
                        border-bottom:none;
                    }
                }
                .buy{
                    width:100%;
                    height:@size55;
                    border-bottom:1px solid #f0f0f0;
                    .buy-text .icon{
                        height: .5rem;
                        width: .5rem;
                        float: left;
                        margin: .45rem 8px 0 0;
                    }
                    .buy-text{
                        font-size: 15px;
                        color: #333333;
                        letter-spacing: 0;
                        line-height: @size55;
                        text-align: left;
                        margin-left:0.5rem;
                        float:left;
                    }
                    .btn-mun{
                        line-height:@size55;
                        font-size: 14px;
                        color: #BBBBBB;
                        float:right;
                        margin-right:0.2rem;
                        span{
                            float: left;
                            display: block;
                            background: red;
                            height: 0.5rem;
                            padding:0 0.15rem;
                            -webkit-box-sizing: border-box;
                            -moz-box-sizing: border-box;
                            box-sizing: border-box;
                            border-radius: 50px;
                            text-align: center;
                            line-height: 0.5rem;
                            color: #fff;
                            margin-top: 0.47rem;
                        }
                    }
                }
            }
        }
        .mesTi{
            width: 0.53rem;
            height: 0.53rem;
            background: #FF6B45;
            display: inline-block;
            margin-top: 0.3rem;
            border-radius: 100%;
            text-align: center;
            line-height: 0.53rem;
            color: #fff;
            z-index:100;
        }

    }
</style>